<template>
  <el-dialog
    title="明细"
    :visible.sync="visible"
    width="76%"
    top="15vh"
    :append-to-body="true"
    @opened="opend"
    @closed="closed"
  >
    <div id="main" style="width: 100%; height: 500px"></div>
  </el-dialog>
</template>

<script>
import * as echarts from "echarts";
import { getPerMonth } from "@http/api.js";
export default {
  name: "",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
      myChart: null,
    };
  },
  computed: {},
  watch: {},
  methods: {
    closed() {
      this.$emit("close");
    },
    opend() {
      getPerMonth().then((res) => {
        let { code, data } = res.data;
        if (code == 200) {
          let month = data.map((d) => d.per_month);
          let money = data.map((d) => d.pay_money);
          let liters = data.map((d) => d.liters);
          let max_money = Math.max(...money)
            ? Math.round(Math.max(...money) + 80)
            : 0;
          let max_liters = Math.max(...liters)
            ? Math.round(Math.max(...liters) + 10)
            : 0;
          this.$nextTick(() => {
            this.myChart = echarts.init(document.getElementById("main"));
            // 指定图表的配置项和数据
            var option = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  crossStyle: {
                    color: "#999",
                  },
                },
              },
              grid: {
                bottom: 70,
              },
              dataZoom: [
                {
                  type: "inside",
                },
                {
                  type: "slider",
                },
              ],
              toolbox: {
                feature: {
                  dataZoom: {
                    yAxisIndex: false,
                  },
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ["line", "bar"] },
                  saveAsImage: { show: true },
                },
              },
              legend: {
                data: ["加油量", "金额"],
              },
              xAxis: [
                {
                  type: "category",
                  data: month,
                  axisPointer: {
                    type: "shadow",
                  },
                },
              ],
              yAxis: [
                {
                  type: "value",
                  name: "加油量",
                  min: 0,
                  max: max_liters,
                  interval: 20,
                  axisLabel: {
                    formatter: "{value} L",
                  },
                },
                {
                  type: "value",
                  name: "金额",
                  min: 0,
                  max: max_money,
                  interval: 200,
                  axisLabel: {
                    formatter: "{value} ￥",
                  },
                },
              ],
              series: [
                {
                  name: "加油量",
                  type: "bar",
                  tooltip: {
                    valueFormatter: function (value) {
                      return value + "L";
                    },
                  },
                  data: liters,
                  itemStyle: {
                    color: "#ff6e34",
                  },
                  barWidth: "50%",
                },
                {
                  name: "金额",
                  type: "line",
                  yAxisIndex: 1,
                  tooltip: {
                    valueFormatter: function (value) {
                      return value + "￥";
                    },
                  },
                  data: money,
                  itemStyle: {
                    color: "blue",
                  },
                },
              ],
            };

            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(option);
          });
        }
      });
    },
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {
    this.myChart.dispose();
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped></style>
